<style>
    .ly-img-info {
        display: flex;
    }

    .ly-img-info .ly-img-info-pic {
        width: 40px;
        height: 40px;
        border-radius: 2px;
        border:1px solid #efefef;
    }
    .ly-img-info .ly-img-info-pic.ly-img-info-circle{
        border-radius: 50%;
    }

    .ly-img-info.ly-img-info-medium .ly-img-info-pic {
        width: 60px;
        height: 60px;
    }

    .ly-img-info.ly-img-info-big .ly-img-info-pic {
        width: 80px;
        height: 80px;
    }

    .ly-img-info.ly-img-info-small .ly-img-info-pic {
        width: 30px;
        height: 30px;
    }

    .ly-img-info .ly-img-info-con {
        flex:1;
        padding-left: 10px;
        font-size: 12px;
        line-height: 14px;
    }

    .ly-img-info.ly-img-info-medium .ly-img-info-title, .ly-img-info.ly-img-info-big .ly-img-info-title {
        margin-bottom: 5px;
    }

    .ly-img-info.ly-img-info-small .ly-img-info-title {
        margin-top: 5px;
        font-size: 14px;
    }

    .ly-img-info .ly-img-info-title {
        font-size: 13px;
        line-height: 22px;
        color: #475669;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .ly-img-info.ly-img-info-big .ly-img-info-title {
        height: 40px;
        font-size: 14px;
        line-height: 20px;
    }

    .ly-img-info .crad-medium-price {
        font-size: 12px;
        color: #F57123;
    }

    .ly-img-info .mb6 {
        margin-bottom: 6px;
    }

    .ly-img-info .mr10 {
        margin-right: 10px;
    }
    .ly-img-info  .ly-info-label{
        line-height: 16px;
        font-size: 12px;
        color: #9da9b6;;
    }



</style>
<template>

    <div class="ly-img-info  cf" :class="['ly-img-info-'+size]">
        <div class="ly-img-info-pic   ly-img" :class="{'ly-img-info-circle':circle}"
             :style="{'background-image': 'url('+src+')','width':size=='big'?imgWidth+'px':null}"></div>
        <div class="ly-img-info-con">
            <div class="ly-img-info-title" :style="{'font-weight':bold?'bold':500}">
                <slot name="title">
                    {{title}}
                </slot>
            </div>
            <div>
                <slot></slot>
            </div>

        </div>
    </div>


</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-img-info',
            props: {
                circle:{
                    type:Boolean,
                    default:false
                },
                bold:{
                    type:Boolean,
                    default:false
                },
                'imgWidth':{
                    default:80
                },
                size: {
                    default: 'normal'
                },
                src: String,
                title: String
            }, created: function () {

            }, methods: {}
        }
    });
</script>
